<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is='sui-header'>
        Grid
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <!--默认16栏网格，column栏、列，row行-->
      <sui-grid :columns="4" centered celled="internally" doubling stackable>
        <sui-grid-row>
          <sui-grid-column>
            <sui-statistic color="red">
              <sui-statistic-value>1</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
          </sui-grid-column>
        </sui-grid-row>
        <sui-grid-column>
          <sui-statistic color="pink">
            <sui-statistic-value>2</sui-statistic-value>
            <sui-statistic-label>COLUMN</sui-statistic-label>
          </sui-statistic>
        </sui-grid-column>
        <sui-grid-column>
          <sui-statistic color="green">
            <sui-statistic-value>3</sui-statistic-value>
            <sui-statistic-label>COLUMN</sui-statistic-label>
          </sui-statistic>
        </sui-grid-column>
        <!--只有在手机上才显示出来-->
        <sui-grid-column class="mobile only">
          <sui-statistic class="orange">
            <sui-statistic-value>4</sui-statistic-value>
            <sui-statistic-label>COLUMN</sui-statistic-label>
          </sui-statistic>
        </sui-grid-column>
      </sui-grid>
      <sui-grid divided="vertically" doubling stackable>
        <sui-grid-row>
          <sui-grid-column :width="4">
            <sui-statistic color="red">
              <sui-statistic-value>1</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
            <p>“It is our attitude at the beginning of a difficult task which,
              more than anything else, will affect its successful outcome.”</p>
          </sui-grid-column>
          <sui-grid-column :width="4">
            <sui-statistic color="pink">
              <sui-statistic-value>2</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
            <p>“It is our attitude at the beginning of a difficult task which,
              more than anything else, will affect its successful outcome.”</p>
          </sui-grid-column>
          <!--computer only 只在电脑端显示-->
          <sui-grid-column class="computer only" :width="8">
            <sui-statistic color="green">
              <sui-statistic-value>3</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
            <p>“It is our attitude at the beginning of a difficult task which,
              more than anything else, will affect its successful outcome.”</p>
          </sui-grid-column>
        </sui-grid-row>
        <sui-grid-row>
          <sui-grid-column :width="16">
            <sui-statistic class="orange">
              <sui-statistic-value>4</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
            <p>“It is our attitude at the beginning of a difficult task which,
              more than anything else, will affect its successful outcome.”</p>
          </sui-grid-column>
        </sui-grid-row>
      </sui-grid>
      <sui-divider/>
      <h2>手机、平板、电脑测试</h2>
      <sui-divider/>
      <sui-grid :columns="4">
        <sui-grid-row>
          <sui-grid-column class="sixteen wide mobile four wide tablet eight wide computer">
            <sui-statistic color="red">
              <sui-statistic-value>1</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
            <p>“It is our attitude at the beginning of a difficult task which,
              more than anything else, will affect its successful outcome.”</p>
          </sui-grid-column>
          <sui-grid-column>
            <sui-statistic color="pink">
              <sui-statistic-value>2</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
            <p>“It is our attitude at the beginning of a difficult task which,
              more than anything else, will affect its successful outcome.”</p>
          </sui-grid-column>
          <sui-grid-column>
            <sui-statistic color="green">
              <sui-statistic-value>3</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
            <p>“It is our attitude at the beginning of a difficult task which,
              more than anything else, will affect its successful outcome.”</p>
          </sui-grid-column>
          <sui-grid-column>
            <sui-statistic class="orange">
              <sui-statistic-value>4</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
            <p>“It is our attitude at the beginning of a difficult task which,
              more than anything else, will affect its successful outcome.”</p>
          </sui-grid-column>
        </sui-grid-row>
        <sui-grid-row>
          <sui-grid-column>
            <sui-statistic color="red">
              <sui-statistic-value>5</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
            <p>“It is our attitude at the beginning of a difficult task which,
              more than anything else, will affect its successful outcome.”</p>
          </sui-grid-column>
          <sui-grid-column>
            <sui-statistic color="pink">
              <sui-statistic-value>6</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
            <p>“It is our attitude at the beginning of a difficult task which,
              more than anything else, will affect its successful outcome.”</p>
          </sui-grid-column>
          <sui-grid-column>
            <sui-statistic color="green">
              <sui-statistic-value>7</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
            <p>“It is our attitude at the beginning of a difficult task which,
              more than anything else, will affect its successful outcome.”</p>
          </sui-grid-column>
          <sui-grid-column>
            <sui-statistic class="orange">
              <sui-statistic-value>8</sui-statistic-value>
              <sui-statistic-label>COLUMN</sui-statistic-label>
            </sui-statistic>
            <p>“It is our attitude at the beginning of a difficult task which,
              more than anything else, will affect its successful outcome.”</p>
          </sui-grid-column>
        </sui-grid-row>
      </sui-grid>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Grid'
}
</script>

<style scoped>

</style>
